<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    li{
        list-style: none;
    }
    h1{ 
        position: relative;
        left: 670px;;
        margin: 5px;

    }
    .box1{
        position: relative;
        left: 753px;
        padding-bottom: 10px;
        width: 66px;
        border-bottom:solid #9e0256 4px;
        
        
    }
    .box1 li{    
        font-weight:bold;
    }
    
    .box2{
        position: absolute;
        left: 565px;
        margin-top: 99px; 
        width: 370px;
        height: 240px;
        margin-left:35px; ;
        padding-left: 0;
        border:dashed #cccccc 1px;
        border-radius: 10px;
        display: inline-block;
    }
    .box2 img{
        position: absolute;
        left: 50%;
        margin-left: -58px;
        top: -60px;
        
    }
    .box3{
        position: relative;
        margin-top: 99px; 
        width: 370px;
        height: 240px;
        margin-left:160px; ;
        padding-left: 0;
        border:dashed #cccccc 1px;
        border-radius: 10px;
        display: inline-block;
    }
    .box3 img{
        position: absolute;
        left: 50%;
        margin-left: -58px;
        top: -60px;
        
    }
    .box4{
        position: absolute;
        left: 970px;
        margin-top: 99px; 
        width: 370px;
        height: 240px;
        margin-left:35px; ;
        padding-left: 0;
        border:dashed #cccccc 1px;
        border-radius: 10px;
        display: inline-block;
    }
    .box4 img{
    position: absolute;
        left: 50%;
        margin-left: -58px;
        top: -60px;
        
    }
    .box5{
        background-color: black;
        width: 1200px; 
        height: 450px;
        margin-left: 160px; 
        margin-top :  40px; ;
    }
    #h2{
        font-weight:bold;
        padding-top: 62px;
        padding-bottom:10px ;
        text-align: center;
    }
    #h{
        font-weight:bold;
        padding-top: 30px;
        padding-bottom:10px;
        text-align: center;
    }
    .box3 li{
        text-align: center;   
    } 
</style>
<body>
    <h1>CONTACT US</h1>
    <div class="box1">
    <li>联系我们</li>
    </div>
    <div class="box3">
        <img src="1.png" alt="">
        <li id="h2">工厂地址</li>
        <li>某某省某市某区某大道某 某大厦某某栋</li>
        <li id="h">门店地址</li>
        <li>某某省某市某区某大道某 某大厦某某栋</li>
    </div>
    <div class="box2">
        <img src="2.png" alt="">
        <li id="h2">服务热线</li>
        <li>400-0000-00X</li>
        <li id="h">公司座机</li>
        <li>0000-000000X</li>
        </div>
    <div class="box4">
        <img src="3.png" alt="">
        <li id="h2">公司邮箱</li>
        <li>XXXXXX@XX.COM</li>
        <li id="h">公司传真</li>
        <li>0000-000000X</li>
    </div>
    <div class="box5"></div>
    <div id="wrap" class="my-map">
        <div id="mapContainer"></div>
      </div>
      <script src="//webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
      <script>
      !function(){
        var infoWindow, map, level = 18,
          center = {lng: 121.499605, lat: 31.239796},
          features = [{"icon":"cir","color":"red","name":"上海浦东新区世纪大道1号","desc":"地铁2号线到陆家嘴","lnglat":{"Q":31.23979586336098,"R":121.49960483685135,"lng":121.499605,"lat":31.239796},"offset":{"x":-9,"y":-31},"type":"Marker"}];
    
        function loadFeatures(){
          for(var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++){
            data = features[i];
            switch(data.type){
              case "Marker":
                feature = new AMap.Marker({ map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                  zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
                  content: '<div class="icon icon-' + data.icon + ' icon-'+ data.icon +'-' + data.color +'"></div>' });
                break;
              case "Polyline":
               for(j = 0, jl = data.path.length, path = []; j < jl; j++){
                               path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
                           }
                feature = new AMap.Polyline({ map: map, path: path, extData: data, zIndex: 2,
                  strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity });
                break;
              case "Polygon":
                for(j = 0, jl = data.path.length, path = []; j < jl; j++){
                  path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
                }
                feature = new AMap.Polygon({ map: map, path: path, extData: data, zIndex: 1,
                  strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
                  fillColor: data.fillColor, fillOpacity: data.fillOpacity });
                break;
              default: feature = null;
            }
            if(feature){ AMap.event.addListener(feature, "click", mapFeatureClick); }
          }
        }
    
        function mapFeatureClick(e){
          if(!infoWindow){ infoWindow = new AMap.InfoWindow({autoMove: true,isCustom: false}); }
          var extData = e.target.getExtData();
          infoWindow.setContent("<div class='myinfowindow'><h5>" + extData.name + "</h5><div>" + extData.desc + "</div></div>");
          infoWindow.open(map, e.lnglat);
        }
    
        map = new AMap.Map("mapContainer", {center: new AMap.LngLat(center.lng, center.lat), level: level, keyboardEnable:true, dragEnable:true, scrollWheel:true, doubleClickZoom:true});
        
        loadFeatures();
    
        map.on('complete', function(){
          map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function(){
            map.addControl(new AMap.ToolBar({ruler: true, direction: true, locate: false})); map.addControl(new AMap.OverView({isOpen: true})); map.addControl(new AMap.Scale);
          });	
        })
        
        }();
      </script>
</body>
</html>